<template>
  <div class="hospital">
    <!-- 病例档案摘要 -->
    <div class="hospital-one">
      <div class="flex flex-center align-center hospital-one-title">
        <span class="hospital-one-title-s1"></span>
        <span class="hospital-one-title-s2"></span>
        <span class="hospital-one-title-content">病例档案摘要</span>
        <span class="hospital-one-title-s2"></span>
        <span class="hospital-one-title-s1"></span>
      </div>
      <div class="hospital-one-content">
        <van-field
          v-if="userType == 0"
          v-model="blContent"
          rows="4"
          autosize
          type="textarea"
          :border="false"
        />
        <van-field
          v-else
          v-model="blContent"
          rows="4"
          autosize
          readonly
          type="textarea"
          :border="false"
        />
      </div>
    </div>
    <!-- 专属医生团队 -->
      <div class="hospital-two">
        <div class="flex flex-center align-center hospital-one-title">
          <span class="hospital-one-title-s1"></span>
          <span class="hospital-one-title-s2"></span>
          <span class="hospital-one-title-content">专属医生团队</span>
          <span class="hospital-one-title-s2"></span>
          <span class="hospital-one-title-s1"></span>
        </div>
        <div class="hospital-two-content">
          <div class="flex flex-left hospital-two-list" v-for="item in doctorList" :key="item.id">
            <div class="flex flex-left align-center hospital-two-list-title">{{item.depName}}：</div>
            <div class="flex flex-left flex-wrap hospital-two-list-r">
              <div class="flex flex-left align-center hospital-two-list-r-l" v-for="docitem in item.doctors" :key="docitem.id">
                {{docitem.name}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hospital-four">
        <!-- 检验检查报告report -->
        <div class="flex flex-center align-center hospital-one-title">
          <span class="hospital-one-title-s1"></span>
          <span class="hospital-one-title-s2"></span>
          <span class="hospital-one-title-content">检验检查报告</span>
          <span class="hospital-one-title-s2"></span>
          <span class="hospital-one-title-s1"></span>
        </div>
        <!-- 三甲医院 -->
        <div class="hospital-four1">
          <div class="hospital-four1-title">三甲医院</div>
          <div class="flex flex-left flex-wrap hospital-four-content">
            <div class="flex flex-center align-center hospital-four-content-list" v-for="item in hospitalOfTopThree" :key="item.id" @click="addReportFunc(0, item.name, item.url, item.remark)">{{item.name}}</div>
            <div class="flex flex-center align-center hospital-four-content-list hospital-four-content-list-icon" @click="addReportFunc(1)">
              <van-icon name="plus" color="#fff" size="20"/>
            </div>
          </div>
        </div>
        <!-- 综合医院 -->
        <div class="hospital-four1">
          <div class="hospital-four1-title">综合医院</div>
          <div class="flex flex-left flex-wrap hospital-four-content">
            <div class="flex flex-center align-center hospital-four-content-list" v-for="item in hospitalOfCommon" :key="item.id" @click="addReportFunc(0, item.name, item.url, item.remark)">{{item.name}}</div>
            <div class="flex flex-center align-center hospital-four-content-list hospital-four-content-list-icon" @click="addReportFunc(2)">
              <van-icon name="plus" color="#fff" size="20"/>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import {queryOneReport} from '@/api'
export default {
  data() {
    return {
      blContent: '姓名：李伟仑\n' +
          '性别：男\n' +
          '年龄：47岁\n' +
          '职业：环卫工人\n' +
          '确诊病名：肺癌\n' +
          '类型：非小细胞肺癌\n' +
          '上级医院治疗情况：手术完成\n' +
          '入院科室：内科\n' +
          '入院日期：2021年10月16日\n' +
          '化疗方案名称：EP\n' +
          '主诉摘要：咳嗽、胸闷\n' +
          '重点病史：无  ',
      doctorList: [],
      hospitalOfTopThree: [],
      hospitalOfCommon: [],
      patientId: '',
      processId: '',
      userType: ''
    }
  },
  created() {
    this.patientId = this.$route.query.userid;
    this.processId = this.$route.query.processid;
    this.doctorList = JSON.parse(sessionStorage.getItem('userInfo')).config.doctorDepInfos;
    this.userType = JSON.parse(sessionStorage.getItem('userInfo')).userType;
    this.queryOneReportFunc();
  },
  methods: {
    // 获取单条数据
    queryOneReportFunc() {
      let data = 'processId=' + this.processId + '&userId=' + this.patientId;
      queryOneReport(data).then(res => {
        console.log('数据', res.data);
        if (res.data) {
          let aData = res.data;
          // 三甲医院
          this.hospitalOfTopThree = aData.baseProcessDataJson.hospitalOfTopThree;
          // 综合医院
          this.hospitalOfCommon = aData.baseProcessDataJson.hospitalOfCommon;

          sessionStorage.setItem('processInfo', JSON.stringify(aData))
        } else {
          let aData = {
            baseProcessDataJson: {
              hospitalOfCommon: [],
              hospitalOfTopThree: []
            },
            processId: this.processId,
            userId: this.patientId,
          }
          sessionStorage.setItem('processInfo', JSON.stringify(aData))
        }
      })
    },
    // 添加报告
    addReportFunc(type, name, url, remark) {
      if (type == 0) {
        let aJson = {
          name: name,
          url: url,
          remark: remark
        }
        sessionStorage.setItem('reportInfo', JSON.stringify(aJson));
      }
      this.$router.push({
        path: '/addReport',
        query: {
          type: type,
        }
      })
    }
  }
}
</script>
<style>
  .hospital-one-title,.hospital-two-title,.hospital-four-title{
  width: 100%;
  height: auto;
}
.hospital-one-title-content{
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  background-image: linear-gradient(0deg, #08C68E 0%, #2883C9 100%);
  background-image: -webkit-linear-gradient(0deg, #08C68E 0%, #2883C9 100%); /* Safari 5.1-6.0 */
  background-image: -o-linear-gradient(0deg, #08C68E 0%, #2883C9 100%); /* Opera 11.1-12.0 */ 
  background-image: -moz-linear-gradient(0deg, #08C68E 0%, #2883C9 100%); /* Firefox 3.6-15 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
</style>
<style scoped>
.hospital{
  width: auto;
  height: auto;
  padding: 15px 10px 30px;
  margin-bottom: 0px !important;
  background-color: #F1F1F1;
}
.hospital-one,.hospital-two,.hospital-four{
  width: auto;
  height: auto;
  padding: 15px 0px;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 1px 1px 4px 0px rgba(8, 1, 3, 0.2);
  border-radius: 10px;
  overflow: hidden;
}
.hospital-one-title-s1{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #28C99A;
}
.hospital-one-title-s2{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #28C99A;
}
.hospital-one-title-s1:nth-child(1){
  margin-right: 4px;
}
.hospital-one-title-s1:nth-child(5){
  margin-left: 4px;
}
.hospital-one-title-s2:nth-child(2){
  margin-right: 10px;
}
.hospital-one-title-s2:nth-child(4){
  margin-left: 10px;
}
.hospital-one-content{
  width: 100%;
  height: auto;
  margin-top: 15px;
}
.hospital-two-content{
  width: 100%;
  height: auto;
  margin-top: 15px;
  margin-left: 15px;
}
.hospital-two-list{
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.hospital-two-list-title{
  width: 60px;
  height: 35px;
  color: #111;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  margin-right: 10px;
}
.hospital-two-list-r{
  width: auto;
  height: auto;
  flex: 1;
  overflow: hidden;
}
.hospital-two-list-r-l{
  width: auto;
  height: auto;
  padding: 5px 10px;
  border-radius: 5px;
  color: #08C68E;
  font-size: 12px;
  font-weight: 500;
  margin-right: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  border: 1px solid #08C68E;
}
.hospital-two-list-r-l-icon{
  display: block;
  width: 25px;
  height: 25px;
  vertical-align: top;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 5px;
}

.hospital-four1{
  width: auto;
  height: auto;
  padding: 15px 15px 0px;
}
.hospital-four-content{
  width: 100%;
  height: auto;
  margin-top: 15px;
}
.hospital-four-content-list{
  width: auto;
  height: auto;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 5px 10px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #42DDA2;
  margin-right: 5px;
  margin-bottom: 5px;
}
.hospital-four-content-list-icon{
  width: 45px;
}
</style>
